<template>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >

    <div class="modal-ctrl-body" v-if="RevampModalObj.isShow">
      <div class="modal-ctrl-main map-ctrl">
        <div class="modal-title">
          <p>新增安保线路信息</p>
        </div>
        <div class="modal-ctrl-content clear-false">

          <div class="map-body f-l">
            <lineMap
              :line-symbol-color=AddData.COLOR
              :line-symbol-width=lineSymbolWidth
              :line-symbol-style=lineSymbolStyle
              :paths="paths"
              :length="length"
              @graphicJSON=graphicJSON
            ></lineMap>
          </div>
          <div class="map-body f-l" :style="{right: openMapDataContentIsShow ? '0':'-640px'}">

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                名称：
              </div>
              <input type="text" maxlength="16" placeholder="最长16个字符" v-model="AddData.NAME" class="modal-text f-l">
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                分类：
              </div>
              <select @change="selectTYPE" v-model="AddData.TYPE" class="modal-text">
                <option value="-1">选择分类</option>
                <option v-for="item in typeList" :value="item.targetMenuCode">{{ item.name }}</option>
              <!--  <option value="YDYXL">运动员路线</option>
                <option value="YSXL">元首线路</option>
                <option value="YJABXL">一级安保线路</option>
                <option value="EJABXL">二级安保线路</option>-->
              </select>
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                起点：
              </div>
              <input v-model="AddData.START_POINT" maxlength="32" placeholder="最长32个字符" type="text" class="modal-text f-l">
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                终点：
              </div>
              <input v-model="AddData.END_POINT" maxlength="32" placeholder="最长32个字符" type="text" class="modal-text f-l">
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                所属单位：
              </div>
              <select @change="selectDistrict" v-model="AddData.DISTRICT" class="modal-text">
                <option value="-1">选择所属单位</option>
                <option v-for="item in areaList" :value="item.targetMenuCode">{{ item.name }}</option>
              <!--  <option value="CD">蔡甸</option>
                <option value="DH">东湖</option>
                <option value="DXH">东西湖</option>
                <option value="DX">东新</option>
                <option value="HY">汉阳</option>
                <option value="HS">洪山</option>
                <option value="HP">黄陂</option>
                <option value="JA">江岸</option>
                <option value="JH">江汉</option>
                <option value="JX">江夏</option>
                <option value="KFQ">开发区</option>
                <option value="QK">硚口</option>
                <option value="QS">青山</option>
                <option value="WC">武昌</option>
                <option value="XZ">新洲</option>-->
              </select>
            </div>
            <div class="modal-row f-l">
              <div class="modal-form-key f-l indispensable">
                线段颜色：
              </div>
              <div class=""></div>
              <input type="color" style="width: 60%;height: 30px;" v-model=AddData.COLOR>
              <!--   <input type="text" v-model=AddData.WIDTH>{{AddData.WIDTH}}
                 <input type="text" v-model=AddData.WIDTH>{{AddData.WIDTH}}-->
            </div>

            <div class="modal-row f-l">
              <div class="modal-form-key f-l indispensable">
                线宽：
              </div>
              <div class="select-line-style-box f-l"  @click="clickSelectLine">
                <span>{{AddData.WIDTH}}</span>
                <ul class="select-line" v-show="selectLineIsShow">
                  <li v-for="line in selectLine" @click="selectLineStyle(line)" :value="line"></li>
                </ul>
              </div>
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l">
                备注：
              </div>
              <!--<input v-model="AddData.COMMENTS" type="text" class="modal-text f-l">-->
              <textarea v-model="AddData.COMMENTS" maxlength="100" class="modal-text f-l"></textarea>
            </div>

          </div>
          <div class="map-data-show"
               :style="{right: openMapDataContentIsShow ? '600px':'-40px'}"
               @click="openMapDataContent"
               title="录入地图信息"
          >
            <span class="glyphicon"
                  :class="{'glyphicon-chevron-left':!openMapDataContentIsShow,'glyphicon-chevron-right':openMapDataContentIsShow}">
            </span>
            <span class="glyphicon"
                  :class="{'glyphicon-chevron-left':!openMapDataContentIsShow,'glyphicon-chevron-right':openMapDataContentIsShow}">
            </span>
          </div>
        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="close">取消</button>
          <button type="button" class="btn btn-info" @click="subBtn">确定</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
    import lineMap from "../../map/lineMap/lineMap"
    export default {
        name: "RevampCircuitModal",
        props:["RevampModalObj","selectRowId"],
        data(){
          return{
            data:[],
            lineSymbolColor: '#333333',
            lineSymbolWidth: '4',
            lineSymbolStyle: 'solid',
            objectId: null,
            searchObjectId: 0,
            paths: null,          // 图形的路径
            length: null,         // 距离
            selectLine:["dash_1","solid_2","solid_4","solid_6","solid_8"],
            selectLineIsShow: false,
            areaList:[],
            typeList:[],
            AddData:{
              NAME:"",//名称
              START_POINT:"",//起点
              END_POINT:"",//终点
              DISTRICT:"-1",//所属单位
              TYPE:"-1",//分类
              COLOR:"#333333",//线颜色
              WIDTH:"solid_4",//线宽
              MAP_CODE:"",//地图标识符 新增线路的objectID
              CREATE_USER:"",//创建人
              COMMENTS:"",//备注
            },
            setting : {
              data: {
                simpleData: {
                  enable: true
                },
              }
            },
            smallDisplayImg:"static/img/upicon.png",
            bigDisplayImg:"static/img/upicon.png",
            sectionTreeIShow:false,
            stationName:"",
            iconLis:[],
            selectObj:{
              bigSelect:false,
              smallSelect:false,
            },
            point:[114.21868761726246, 30.584733852070247],
            actionType:null,
            selectId:"",
            openMapDataContentIsShow :false
          }
        },
        components:{
          lineMap
        },
        watch:{
          RevampModalObj:{
            handler(v1){
              if( v1.isShow ){
                //获取所属地区
                this.getAreaList();
                this.selectId = this.selectRowId;
                //console.log(this.selectId);
                //渲染详情
                this.getCircuitData();
                this.openMapDataContent();
                this.getTypeList();
              }
            },
            deep:true
          }
        },
        methods:{
          //根据id获取详情
          getCircuitData(){
            let params = {
              "columns": [
                "*"
              ],
              "conditions": [
                {
                  "field": "ID",
                  "symbol": "=",
                  "value": this.selectId
                }
              ],
              "dataTypeCode": "pointresource",
              "pageSize": -1,
              "tableName": "T_RES_SECURITY_ROUTE"
            };
            this.$axios.post(this.HOST+"/base/query/page",params)
              .then((data)=>{
                //console.log(data);
                let successData = data.data.data.list[0];
                for( let dataKey in this.AddData ){
                  for( let successKey in successData ){
                    if( dataKey === successKey ){
                      this.AddData[dataKey] = successData[successKey];
                    }
                  }
                }

                //console.log(successData.WIDTH);
                //地图渲染
                if(successData['MAP_CODE'])
                this.searchClick(successData['MAP_CODE']);

              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //提交
          subBtn(){
            //console.log(this.AddData);
            this.AddData.CREATE_USER = this.isLogin().userId;
            // return false;
            if( this.verifyForm.isNull(this.AddData.NAME) ){
              this.s_alert("名称不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.START_POINT) ){
              this.s_alert("起点不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.END_POINT) ){
              this.s_alert("终点不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.TYPE) ){
              this.s_alert("分类不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.DISTRICT) ){
              this.s_alert("所属单位不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.DISTRICT) ){
              this.s_alert("所属单位不能为空！");
              return false;
            }

            //修改线路地图
            if(this.data.length!==0){
              this.$axios({
                method: 'post',
                url: mapFeatureServer + '1/updateFeatures', // 1 线 2 圈
                data: 'f=json&features='+JSON.stringify(this.data),
                headers: {"Content-Type": "application/x-www-form-urlencoded"}
              }).then( res => {
                //console.log(res);
                //this.AddData.MAP_CODE = res.data.addResults[0].objectId;
                //console.log(this.AddData.MAP_CODE);
                //this.s_alert('新增成功'+this.objectId);
                //修改线路
                let params = {
                  "conditions": [
                    {
                      "field": "ID",
                      "symbol": "=",
                      "value": this.selectId
                    }
                  ],
                  "data": this.AddData,
                  "dataTypeCode": "pointresource",
                  "tableName": "T_RES_SECURITY_ROUTE"
                };
                //console.log(params);
                this.$axios.put(this.HOST+"/base/modify",params)
                  .then((data)=>{
                    //console.log(data);
                    if( data.data.success ){
                      this.s_alert("修改成功！");
                      this.s_logwrite("点位信息管理-安保线路管理","修改安保线路");
                      this.close();
                    }
                  })
                  .catch((err)=>{
                    //console.log(err);
                  })
              })
            }
            else {
              this.s_alert("请先画线");
            }

          },
          //获取所属地区
          getAreaList(){
            //POST /dictionary/{key}
           /* this.$axios.post(this.HOST+"/dictionary/area")
              .then(res=>{
                //console.log(res);
                this.areaList = res.data;

              })
              .catch(err=>{
                //console.log(err);
              })*/
            this.$axios.post(this.DotCtrl+"/mapDictionaryRelation/getRelationInfoList",{
              "parentMenuCode": "MAP_SSDW",
            })
              .then(res=>{
                /*   //console.log(1);
                   //console.log(res);*/
                let success = res.data;
                let list = [];
                for( let i=0;i<success.length;i++ ){
                  success[i].targetMenuCode = success[i].targetMenuCode.split("_")[1];
                  list.push(success[i]);
                }
                this.areaList = list;
                //console.log(this.areaList);
              })
              .catch(err=>{
                //console.log(err);
              })
          },
          //获取类型
          getTypeList(){
            //POST /dictionary/{key}
            this.$axios.post(this.DotCtrl+"/mapDictionaryRelation/getRelationInfoList",{
              "parentMenuCode": "MAP_ABXL",
            })
              .then(res=>{
                /*   //console.log(1);
                   //console.log(res);*/
                let success = res.data;
                let list = [];
                for( let i=0;i<success.length;i++ ){
                  success[i].targetMenuCode = success[i].targetMenuCode.split("_")[1];
                  list.push(success[i]);
                }
                this.typeList = list;
                //console.log(this.typeList);
              })
              .catch(err=>{
                //console.log(err);
              })
          },
          //关闭弹出
          close(){
            this.$emit("closeRevampModal");
            this.clearData();
          },
          //清除缓存
          clearData(){
            this.AddData={
              NAME:"",//名称
              START_POINT:"",//起点
              END_POINT:"",//终点
              DISTRICT:"-1",//所属单位
              TYPE:"-1",//分类
              COLOR:"#333333",//线颜色
              WIDTH:"dash_1",//线宽
              MAP_CODE:"",//地图标识符
              CREATE_USER:"",//创建人
              COMMENTS:"",//备注
            };
            this.openMapDataContentIsShow = false;
          },
          //分类
          selectTYPE(ele){
            //console.log(ele.target.value);
            this.AddData.TYPE = ele.target.value;
          },
          //所属单位
          selectDistrict(ele){
            //console.log(ele.target.value);
            this.AddData.DISTRICT = ele.target.value;
          },
          //地图json
          graphicJSON(json){
            json.attributes["OBJECTID"] = parseInt(this.AddData.MAP_CODE);
            json.attributes["Name"] = 'name';
            this.data = [
              {
                "geometry": json.geometry,
                "attributes":json.attributes
              }
            ];
            //console.log(JSON.stringify(this.data))
          },

          //选择线样式
          selectLineStyle(style){
            ////console.log(style);
            this.AddData.WIDTH = style;
            let arrStyle = style.split("_");
            this.lineSymbolStyle = arrStyle[0];
            this.lineSymbolWidth = arrStyle[1];
            //console.log(arrStyle);
          },
          //选择线段隐藏与显示
          clickSelectLine(){
            this.selectLineIsShow = !this.selectLineIsShow
          },
          searchClick(mapCode){
            // 8080
            // [{"geometry":{"spatialReference":{"wkid":4326},"paths":[[[114.22015812416404,30.586023519862792],[114.21819744858571,30.584234165259023],[114.21819744858571,30.584234165259023]]]},"attributes":{"Name":"name"}}]
            //  where=&objectIds=8080&time=&geometry=&geometryType=esriGeometryPolyline&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&gdbVersion=&returnDistinctValues=false&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&f=pjson
            this.$axios({
              method: 'post',
              url: mapFeatureServer + '1/query',
              data: 'where=&objectIds='+mapCode+'&time=&geometry=&geometryType=esriGeometryPolyline&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&gdbVersion=&returnDistinctValues=false&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&f=pjson',
              headers: {"Content-Type": "application/x-www-form-urlencoded"}
            }).then(res => {
              let paths = res.data.features[0].geometry.paths;
              this.paths = res.data.features[0].geometry.paths;
              this.selectLineStyle(this.AddData.WIDTH);
              //console.log(this.paths)
            })
          },
          //展开地图数据录入界面
          openMapDataContent(){
            this.openMapDataContentIsShow = !this.openMapDataContentIsShow;
          }
        },
    }
</script>

<style scoped>
  .form-control{
    height: 100%;
    border: 1px solid #ccc;
  }
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
</style>
